/**
 * =============================================================================
 * ************   TextInput 输入框   ************
 * =============================================================================
 */

/* 输入框 */
.mdui-input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 36px;
  margin: 0;
  padding: 8px 0;
  overflow: hidden;
  color: rgba(0, 0, 0, 0.87);
  font-size: 16px;
  font-family: inherit;
  line-height: 20px;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, .42);
  border-radius: 0;
  outline: none;
  box-shadow: none;
  transition-timing-function: @animation-curve-default;
  transition-duration: .2s;
  transition-property: border-bottom-color, padding-right, box-shadow;
  appearance: none;
  resize: none;

  &::-webkit-input-placeholder {
    color: inherit;
    opacity: 0.42;
  }

  &:not([disabled]):hover {
    border-bottom: 1px solid rgba(0, 0, 0, .87);
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, .87);
    cursor: pointer;
  }

  &[rows] {
    height: auto !important;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* 聚焦状态的文本框
   ============= */
.mdui-input:focus {
  border-color: @color-default-a700;
  box-shadow: 0 1px 0 0 @color-default-a700;
}

/* 禁用表单
   ====== */
.mdui-input:disabled:-webkit-input-placeholder {
  color: @color-black-disabled;
}

.mdui-input:disabled {
  color: rgba(0, 0, 0, .42);
  border-bottom: 1px dashed rgba(0, 0, 0, .42);
  cursor: default;
}


/**
 * =============================================================================
 * ************   TextInput dark   ************
 * =============================================================================
 */
.layout-theme({

  // 输入框颜色
  .mdui-input {
    color: #fff;
    border-color: rgba(255, 255, 255, .7);

    &::-webkit-input-placeholder {
      color: rgba(255, 255, 255, .5);
    }

    &:not([disabled]):hover {
      border-color: rgba(255, 255, 255, 1);
      box-shadow: 0 1px 0 0 rgba(255, 255, 255, 1);
    }
  }

  // 聚焦状态
  .mdui-input:focus {
    border-color: @color-default-a200;
    box-shadow: 0 1px 0 0 @color-default-a200;
  }

  // 禁用状态
  .mdui-input:disabled:-webkit-input-placeholder {
    color: @color-white-disabled;
  }

  .mdui-input:disabled {
    color: @color-white-disabled;
    border-color: rgba(255, 255, 255, .7);
  }
});


/**
 * =============================================================================
 * ************   TextInput 强调色   ************
 * =============================================================================
 */
& {
  .loop-accent-theme(@counter-color) when (@counter-color > 0) {
    .loop-accent-theme((@counter-color - 1));
    @colorName: extract(@globalAccentColors, @counter-color);

    .mdui-theme-accent-@{colorName} when not (@colorName =null) {

      @colorA700: 'color-@{colorName}-a700';
      @colorA200: 'color-@{colorName}-a200';

      .mdui-input:focus {
        border-color: @@colorA700;
        box-shadow: 0 1px 0 0 @@colorA700;
      }

      // 暗色主题
      & {
        .dark-mode() {

          .mdui-input:focus {
            border-color: @@colorA200;
            box-shadow: 0 1px 0 0 @@colorA200;
          }
        }

        &.mdui-theme-layout-dark {
          .dark-mode();
        }

        @media (prefers-color-scheme: dark) {
          &.mdui-theme-layout-auto {
            .dark-mode();
          }
        }
      }
    }
  }

  .loop-accent-theme(length(@globalAccentColors));
}